<template id="tmp-character-list">
    <div>
        <div class="mt-3 text-right">

            <el-form :inline="true" size="mini" class="demo-form-inline">
                <el-form-item label="账号">
                    <el-input v-model="search.account" placeholder="账号" :clearable="true" maxlength="20"></el-input>
                </el-form-item>
                <el-form-item label="名称">
                    <el-input v-model="search.name" placeholder="名称" :clearable="true" maxlength="20"></el-input>
                </el-form-item>
                <el-form-item label="种族">
                    <el-select v-model="search.race" :clearable="true" placeholder="请选择种族">
                        <el-option label="全部" value=""></el-option>
                        <el-option label="人类" :value="1"></el-option>
                        <el-option label="兽人" :value="2"></el-option>
                        <el-option label="矮人" :value="3"></el-option>
                        <el-option label="暗夜精灵" :value="4"></el-option>
                        <el-option label="亡灵" :value="5"></el-option>
                        <el-option label="牛头人" :value="6"></el-option>
                        <el-option label="侏儒" :value="7"></el-option>
                        <el-option label="巨魔" :value="8"></el-option>
                        <el-option label="血精灵" :value="10"></el-option>
                        <el-option label="德莱尼" :value="11"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="职业">
                    <el-select v-model="search.class" :clearable="true" placeholder="请选择职业">
                        <el-option label="全部" value=""></el-option>
                        <el-option label="战士" :value="1"></el-option>
                        <el-option label="圣骑士" :value="2"></el-option>
                        <el-option label="猎人" :value="3"></el-option>
                        <el-option label="潜行者" :value="4"></el-option>
                        <el-option label="牧师" :value="5"></el-option>
                        <el-option label="死亡骑士" :value="6"></el-option>
                        <el-option label="萨满" :value="7"></el-option>
                        <el-option label="法师" :value="8"></el-option>
                        <el-option label="术士" :value="9"></el-option>
                        <el-option label="德鲁伊" :value="11"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="handleSearch">查询</el-button>
                </el-form-item>
            </el-form>


        </div>
        <el-table
            :data="list"
            style="width: 100%">
            <el-table-column
                prop="username"
                width="150"
                label="账号(id)">
                <template slot-scope="scope">
                    @{{ scope.row.username }} (@{{ scope.row.accid }})
                </template>
            </el-table-column>
            <el-table-column
                prop="name"
                width="150"
                label="名称(guid)">
                <template slot-scope="scope">
                    @{{ scope.row.name }} (@{{ scope.row.guid }})
                </template>
            </el-table-column>
            <el-table-column
                prop="level"
                label="等级"
                width="80">
            </el-table-column>
            <el-table-column
                prop="class" width="100"
                label="种族">
                <template slot-scope="scope">
                    <component-character-race :race="scope.row.race"></component-character-race>
                </template>
            </el-table-column>
            <el-table-column
                prop="class" width="100"
                label="职业">
                <template slot-scope="scope">
                    <component-character-class :c="scope.row.class"></component-character-class>
                </template>
            </el-table-column>

            <el-table-column
                prop="money"

                label="金币">
                <template slot-scope="scope">
                    @{{(scope.row.money/100/100).toFixed(4)}}
                </template>
            </el-table-column>

            <el-table-column
                label="创建时间"
                prop="creation_date"
                width="150">
            </el-table-column>
            <el-table-column
                label="online"
                width="150">
                <template slot-scope="scope">
                    <i v-if="scope.row.online===1" class="el-icon-success"></i>
                    <span v-else>
                        @{{scope.row.logout_time>0?getLocalTime(scope.row.logout_time):''}}
                    </span>

                </template>
            </el-table-column>

            <el-table-column
                prop="ban" width="50"
                label="封禁">
                <template slot-scope="scope">
                    <div v-if="scope.row.ban===1">
                        <i class="el-icon-error"></i>
                    </div>
                </template>
            </el-table-column>
            <el-table-column>
                <template slot-scope="scope">
                    <el-dropdown trigger="click" @command="handleCommand">
                        <el-button size="mini" type="primary">
                            操作<i class="el-icon-arrow-down el-icon--right"></i>
                        </el-button>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item icon="el-icon-plus" :command="{act:'money',item:scope.row}">发放金币</el-dropdown-item>
                            <el-dropdown-item icon="el-icon-plus" :command="{act:'item',item:scope.row}">发放物品</el-dropdown-item>
                            <el-dropdown-item icon="el-icon-sort" :command="{act:'level',item:scope.row}">调整等级</el-dropdown-item>
                            <el-dropdown-item icon="el-icon-close" :command="{act:'mute',item:scope.row}" divided>禁言</el-dropdown-item>
                            <el-dropdown-item icon="el-icon-close" :command="{act:'ban',item:scope.row}" :disabled="scope.row.ban===1">封禁账号</el-dropdown-item>
                            <el-dropdown-item icon="el-icon-check" :command="{act:'unban',item:scope.row}" :disabled="scope.row.ban===0">解除封禁</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </template>
            </el-table-column>

        </el-table>

        <div class="text-center mt-3" v-if="list">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="search.page"
                :page-sizes="[10, 20, 50, 100]"
                :page-size="search.size"
                layout="total, sizes, prev, pager, next, jumper"
                :total="search.total">
            </el-pagination>
        </div>

        <el-dialog
            v-if="curItem"
            :title="actName+'：'+curItem.name"
            :show-close="false"
            :visible.sync="showDialog"
            width="30%">
            <div v-if="showAct==='money'">
                当前金币：@{{ (curItem.money/100/100).toFixed(4) }}
                <br><br>
                添加金币：
                <el-input-number size="mini" v-model="editData.money" :min="1" :max="9999" label="请输入金币数量"></el-input-number>
                <br><br>
                最终金币：@{{ ((editData.money * 10000 + curItem.money)/100/100).toFixed(4) }}
            </div>
            <div v-else-if="showAct==='item'">
                <component-item-select :entry.sync="editData.itemId"></component-item-select>
                <br>
                数量： <el-input-number size="mini" v-model="editData.itemCount" :min="1" :max="10000" label="请输入数量"></el-input-number>
            </div>
            <div v-else-if="showAct==='level'">
                当前等级：@{{curItem.level}}
                <br><br>
                <el-slider
                    v-model="editData.level"
                    show-input>
                </el-slider>
            </div>

            <div v-else-if="showAct==='mute'">
                <el-input-number size="mini" v-model="editData.muteMin" :min="1" :max="24*7"></el-input-number>
                分钟
            </div>

            <div v-else-if="showAct==='ban'">
                <el-input-number size="mini" v-model="editData.banDay" :min="0" :max="30"></el-input-number>
                天
                <el-input-number size="mini" v-model="editData.banHour" :min="0" :max="23"></el-input-number>
                小时
            </div>

            <span slot="footer" class="dialog-footer">
                <el-button @click="showDialog = false">取 消</el-button>
                <el-button type="primary" @click="doAct">确 定</el-button>
            </span>
        </el-dialog>

    </div>
</template>
<script>
    Vue.component("component-character-list", {
        data() {
            return {
                list:[],
                curItem:null,
                showDialog:false,
                showAct:'',
                editData:{
                    money:0,
                    itemId:0,
                    itemCount:1,
                    level:1,
                    muteMin:10,
                    banDay:1,
                    banHour:0,
                },

                // showMoney:false,
                // showItem:false,
                // showLevel:false,
                // showMute:false,
                // showBan:false,
                search: {
                    account:'',
                    name:'',
                    class:'',
                    race:'',
                    size: 10,
                    page:1,
                    total: 1,
                }
            };
        },
        template:"#tmp-character-list",
        mounted() {
            // this.getList();
        },
        computed:{
            actName(){
                switch (this.showAct) {
                    case 'money':
                        return '发放金币';
                    case 'item':
                        return '发放物品';
                    case 'level':
                        return '调整等级';
                    case 'mute':
                        return '禁言';
                    case 'ban':
                        return '封禁账号';
                    case 'unban':
                        return '解除账号封禁';
                    default:
                        return '';
                }
            }
        },
        filters:{
        },
        methods: {
            doAct(){
                switch (this.showAct) {
                    case 'money':
                        if (this.editData.money===0){
                            this.$message.error('无效的金币数量');
                            return;
                        }
                        break;
                    case 'item':
                        if (this.editData.itemId===0){
                            this.$message.error('请选择物品');
                            return;
                        }
                        break;
                    case 'level':
                        break;
                    case 'mute':
                        break;
                    case 'unban':
                        break;
                    case 'ban':
                        if (this.editData.banDay+this.editData.banHour===0){
                            this.$message.error('无效的时间');
                            return;
                        }
                        break;
                    default:
                        return;
                }
                post('characterDoAct', {
                    act:this.showAct,
                    data:this.editData,
                    name:this.curItem.name},res=>{
                        if(res.data===""){
                            this.$message({
                                message: '操作成功',
                                type: 'success'
                            });
                        }else{
                            this.$message.error(res.data);
                        }

                        if (this.showAct==='level'){
                            this.curItem.level=this.editData.level;
                        }else if(this.showAct==='ban'){
                            this.curItem.ban=1;
                        }else if(this.showAct==='unban'){
                            this.curItem.ban=0;
                        }

                        this.showDialog=false;
                        console.log(res);
                    },this)
            },
            handleCommand(command) {
                this.showAct=command.act;
                this.curItem=command.item;
                this.editData.level=command.item.level;
                if (command.act==='unban'){
                    this.doAct();
                }else{
                    this.showDialog=true;
                }
                console.log(command);
                // this.$message('click on item ' + command);
            },
            getList(){
                post('characterList', this.search,res=>{
                    console.log(res);
                    this.list=res.data.data;
                    this.search.total=res.data.total;
                },this)
            },
            handleSearch(){
                this.search.page=1;
                this.getList();
            },
            handleSizeChange(size){
                this.search.size=size;
                this.getList();
            },
            handleCurrentChange(page){
                this.search.page=page;
                this.getList();
            }
        }
    });
</script>

